<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    #div_objectStyle
    {
        width: 23%;
        /* margin: 15px; */
        height: 190px;
        /* border: 1px solid red; */
        display: inline-block;
       
    }
    #div_objectStyle:hover
    {
        cursor: pointer;
        background-color: white;

    }
    #div_objectStyle:hover #img_objectStyle
    {
        opacity:1;
        transform:scale(1.1);
        

    }
    #img_objectStyle
    {
        position:absolute;top:0;
        width:100%;
        height:100%;
        transition:all .5s ease-in-out;
    }
    #div_objectStyle:hover .div_objectShielded
    {
        opacity:0;

    }
    .div_objectShielded
    {
        background-color:black;
        width:100%;
        height:100%;
        z-index:999;
        position:absolute;
        top:0;
        transition:all .5s ease-in-out;
        opacity:.5;
    }
    .li_object{
        list-style-type: none;
        display:inline-block;
        background-color: white;
        /* border: 1px solid red; */
    }
    .h3_object{
        /* margin: 10px; */
        margin: 0;
        font-size: inherit;
        font-weight: 100;
        line-height: inherit;
        text-shadow: none;
        color: inherit;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
   
    </style>
</head>
<body>
    <ul>
        <li class="li_object">
       <h3 class="h3_object">
            全部
        </h3>
    </li>
    <li  class="li_object">
            <h3 class="h3_object">
                整形美容
            </h3>
        </li>
        <li  class="li_object">
                <h3 class="h3_object">
                    美肤嫩肤
                </h3>
            </li>
            <li  class="li_object">
                    <h3 class="h3_object">
                        无创美容
                    </h3>
                </li>
    </ul>
    <div id="div_objectStyle">
        <div style="height:75%; overflow:hidden;position:relative">
            <img id="img_objectStyle" src="img/object1.jpg">
            <div class="div_objectShielded" ></div>
        </div>
        <div >
        <h4 style="color: #222222;font-size: 16px;
        text-align: center;margin:10px;">
            整形隆鼻
        </h4>
        </div>
    </div>
</body>
</html>